<template>
	<view v-if="!loading">
		<u-row justify="space-around" class="date-week">
			<u-image style="transform: rotate(180deg);" width="20px" height="20px"
				src="../../static/images/measuring/arrow.png"></u-image>
			<view>
				{{date}}
			</view>
			<u-image width="20px" height="20px" src="../../static/images/measuring/arrow.png"></u-image>

		</u-row>
		<u-steps inactiveColor="#0B0F12" direction="column">
			<view class="time-line" v-for="(i,iIndex) in dayData" :key="iIndex">
				<view class="card-border">
					<view class="card">
						<u-row>
							<u-col :span="5">
								<u-row style="font-size: 14px;">
									<u-image width="10px" height="10px"
										src="../../static/images/measuring/sj.png"></u-image>
									{{i.time}}
								</u-row>
							</u-col>
							<u-col :span="3">
								<u-row>
									<u-image width="10px" height="10px"
										src="../../static/images/measuring/head.png"></u-image>
									{{i.head}}
								</u-row>
							</u-col>
							<u-col :span="3"><u-row>
									<u-image width="10px" height="10px"
										src="../../static/images/measuring/heart.png"></u-image>
									{{i.heart}}
									<span>
										{{i.unit}}
									</span>
								</u-row></u-col>
							<u-col :span="1" align="bottom">
								<u-image width="20px" height="20px"
									src="../../static/images/measuring/arrow.png"></u-image>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</u-steps>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				date: '2025-02-01至2025-02-28',
				dayData: [{
					time: '03-03 06:32:12',
					head: '左手',
					heart: '97',
					unit: 'bpm'
				}, {
					time: '03-03 06:32:12',
					head: '左手',
					heart: '97',
					unit: 'bpm'
				}, {
					time: '03-03 06:32:12',
					head: '左手',
					heart: '90',
					unit: 'bpm'
				}, {
					time: '03-03 06:32:12',
					head: '左手',
					heart: '87',
					unit: 'bpm'
				}, {
					time: '03-03 06:32:12',
					head: '左手',
					heart: '97',
					unit: 'bpm'
				}, {
					time: '03-03 06:32:12',
					head: '左手',
					heart: '97',
					unit: 'bpm'
				}]

			}
		},
		components: {},
		methods: {},
		mounted() {},
	}
</script>

<style scoped lang="scss">
	.date-week {
		padding: 0px 30px;
		font-weight: bold;
		font-size: 16px;
		color: #999999;
		margin-bottom: 30px
	}


	.time-line {

		.time-icon {
			position: absolute;
			left: -6px;
			top: 22px
		}

		.card-border {
			border-radius: 12px;
			overflow: hidden;
			margin: 0px 12px 12px 12px;

			.card {
				height: 56px;
				box-shadow: inset 0px 0px 12px 6px #2C281F;
				border: 1px solid;
				border-image: linear-gradient(225deg, rgba(112, 108, 99, 1), rgba(81, 69, 51, 1), rgba(255, 219, 180, 1), rgba(133, 113, 81, 1), rgba(90, 92, 80, 1)) 1 1;
				display: flex;
				align-items: center;
				padding: 0px 15px;

				.u-row {
					width: 100%;
					font-size: 16px;
					color: #FFD8BB;

					span {
						font-size: 12px;
						color: #999999;
						margin-left: 4px;
					}

					::v-deep .u-image {
						margin-right: 6px;
					}
				}
			}
		}
	}
</style>